<template>
  <jm-modal-view :config="config" @checkData="(obj) => checkData(obj)" ref="jm_modal_view">

    <!-- ================= 弹窗 插槽 ======================= -->
    <template #dialog_slot="scope">
      <data-detail v-if="childData.checkref == 'data_detail'" ref="data_detail" @close-dialog="closeDialog"></data-detail>
      <!-- <data-detail2 v-if="childData.checkref == 'data_detail2'" ref="data_detail2" @close-dialog="closeDialog"></data-detail2> -->
    </template>
    
    <!-- 自定义 字段 处理插槽 -->
    <!-- <template #dayAmount="scope">
      {{ $utils.numDiv(scope.row.dayAmount, 100, 4) }}
    </template> -->
    <template #sla="scope">
      {{ parseFloat((parseFloat(scope.row.sla) / 100).toFixed(4)) }}
    </template>
    <template #settleDate="scope">
      {{ $filters.DateFilter(scope.row.settleDate, 'yyyy-MM-dd') }}
    </template>
    <template #amount="scope">
      {{ $utils.numDiv(scope.row.amount, 100, 4) }}
    </template>
    <template #adminUserId="scope">
      <div v-if="parseFloat(scope.row.adminAmount) == 0">

      </div>
      <div v-else>
        {{ scope.row.adminUserName }}
        【{{ $utils.numDiv(scope.row.adminAmount, 100, 4) }}】
      </div>
    </template>
    <template #companyUserId="scope">
      <div v-if="parseFloat(scope.row.companyAmount) == 0">

      </div>
      <div v-else>
        {{ scope.row.companyUserName }}
        【{{ $utils.numDiv(scope.row.companyAmount, 100, 4) }}】
      </div>
    </template>
    <!-- =========================================== -->
    <template #partnerUserId="scope">
      <div v-if="parseFloat(scope.row.partnerAmount) == 0">

      </div>
      <div v-else>
        {{ scope.row.partnerUserName }}
        【{{ $utils.numDiv(scope.row.partnerAmount, 100, 4) }}】
      </div>
      <div v-if="scope.row.cityReferenceUserId == 0">

      </div>
      <div v-else>
        {{ scope.row.cityReferenceUserName }}
        【{{ $utils.numDiv(scope.row.cityReferenceAmount, 100, 4) }}】
      </div>
    </template>
    <template #partnerReferenceUserId="scope">
      <div v-if="parseFloat(scope.row.partnerReferenceAmount) == 0">

      </div>
      <div v-else>
        {{ scope.row.partnerReferenceUserName }}
        【{{ $utils.numDiv(scope.row.partnerReferenceAmount, 100, 4) }}】
      </div>
    </template>
    <!-- ================================================ -->
    <template #cityUserId="scope">
      <div v-if="parseFloat(scope.row.cityAmount) == 0">

      </div>
      <div v-else>
        {{ scope.row.cityUserName }}
        【{{ $utils.numDiv(scope.row.cityAmount, 100, 4) }}】
      </div>
      <div v-if="scope.row.countyReferenceUserId == 0">

      </div>
      <div v-else>
        {{ scope.row.countyReferenceUserName }}
        【{{ $utils.numDiv(scope.row.countyReferenceAmount, 100, 4) }}】
      </div>
    </template>
    <template #cityReferenceUserId="scope">
      <div v-if="parseFloat(scope.row.cityReferenceAmount) == 0">

      </div>
      <div v-else>
        {{ scope.row.cityReferenceUserName }}
        【{{ $utils.numDiv(scope.row.cityReferenceAmount, 100, 4) }}】
      </div>
    </template>
    <!-- ======================================== -->
    <template #countyUserId="scope">
      <div v-if="parseFloat(scope.row.countyAmount) == 0">

      </div>
      <div v-else>
        {{ scope.row.countyUserName }}

        【{{ $utils.numDiv(scope.row.countyAmount, 100, 4) }}】
      </div>
    </template>
    <template #countyReferenceUserId="scope">
      <div v-if="parseFloat(scope.row.countyReferenceAmount) == 0">

      </div>
      <div v-else>
        {{ scope.row.countyReferenceUserName }}
        【{{ $utils.numDiv(scope.row.countyReferenceAmount, 100, 4) }}】
      </div>
    </template>
    <template #userId="scope">
      <div v-if="parseFloat(scope.row.userAmount) == 0">

      </div>
      <div v-else>
        {{ scope.row.userName }}
        【{{ $utils.numDiv(scope.row.userAmount, 100, 4) }}】
      </div>
    </template>

    
    <!-- 自定义 表格事件 处理插槽 -->
    <template #table_btn="scope">
      <!-- <el-button size="small" type="primary" @click="profitByData({ data: scope.row, index: scope._index, checkref: 'data_detail' })">当日收益详情</el-button> -->
    </template>

    <template #easy_search_slot="scope">
      <div style="margin-right: 15px;">
        <el-date-picker
          v-model="scope.adv_search.settleDateRange"
          style="width: 200px;"
          type="daterange"
          placeholder="请选择日期"
          range-separator="至"
          start-placeholder="起始日期"
          end-placeholder="结束日期"
          size="small"
          @change="advSearch({type: 'daterange', data: scope.adv_search.settleDateRange, ori_data: scope.adv_search})"
        />
      </div>
      <el-input style="width:150px;margin-right: 15px;" @input="advSearch()" v-model="scope.adv_search.deviceSn" size="small" placeholder="请输入设备号" />
      <el-input style="width:150px;margin-right: 15px;" @input="advSearch()" v-model="scope.adv_search.userName" size="small" placeholder="请输入用户名" />
    </template>

    

    <!-- 自定义 弹窗 提交事件 -->
    <template #dialog_btn="scope">
      <!-- <el-button v-if="childData.checkref == 'data_detail'" type="primary" 
        @click="childDataOperation({
          checkref: 'data_detail',
          fn: 'submitData'
        })">
        保存
      </el-button> -->
      <!-- <el-button v-if="childData.checkref == 'data_detail2'" type="primary" 
        @click="childDataOperation({
          checkref: 'data_detail2',
          fn: 'submitData'
        })">
        保存2
      </el-button> -->
    </template>

    <!-- 自定义 筛选条件 插槽 -->
    <template #search_slot="scope">
      <div class="flexbox" style="margin-bottom:10px;">
        <div class="searchContent">企业名称：</div>
        <div class="searchBox" style="width:100%;">
          <el-input @input="advSearch()" placeholder="请输入企业名称" v-model="scope.adv_search.enterpriseName" size="small"></el-input>
        </div>
      </div>
      <div class="flexbox" style="margin-bottom:10px;">
        <div class="searchContent">企业名称：</div>
        <div class="searchBox" style="width:100%;">
          <el-input @input="advSearch()" placeholder="请输入企业名称" v-model="scope.adv_search.valueq" size="small"></el-input>
        </div>
      </div>
    </template>

    <!-- 自定义右键事件框 -->
    <template #contextMenu_slot="scope">
      <div class="clickitem" @click="contextMenuClick(scope.row)">
        <div class="itemleft">功能4</div>
        <div class="itemright"></div>
      </div>
    </template>

  </jm-modal-view>
</template>

<script setup>
  import JmModalView from '@/components/Jm_ModalView/JmModalView.vue'
  import DataDetail from './detail.vue'
  // import DataDetail2 from './detail2.vue'


  import { ref, nextTick, inject } from 'vue'
  
  import { useStore } from 'vuex'
  // 注入全局utils工具js
  const $utils = inject('$utils')
  // 注入全局filters工具js
  const $filters = inject('$filters')
  // 定义store
  const store = useStore()

  // 获取到的父组件给子组件的值
  const childData = ref({})
  // 定义ref值
  const data_detail = ref()
  const jm_modal_view = ref()


  // 自定义弹出内容ref
  // const data_detail2 = ref()
  
  // 配置模板表单数据
  const config = ref({
    noKeyWord: true,
    noAdd: true,
    breadcrumb: ['收益列表'],
    // 是否开启右键事件
    openContextMenu: false,
    // 基础增删改查配置
    operation: {
      // 获取表格数据链接
      get_data_url: '/Api/Profit/GetProfitPagedList',
      // 查询表格详情链接
      get_detaildata_url: '',
      // 删除表格数据连接
      del_data_url: '',
      // 编辑列表
      checkref: 'data_detail'
    },
    // 表格内容配置
    table_config: {
      noOp: true,
      opeWidth: 120,
      noEdit: true,
      noDelete: true,
      noDeleteMore: true,
      column: [
        {
          prop: 'settleDate',
          label: '收益时间',
          slot: true,
          width: 100
        },
        {
          prop: 'deviceSn',
          label: '设备编号',
          width: 150
        },

        {
          prop: 'amount',
          label: '总收益',
          slot: true,
          width: 100
        },

        {
          prop: 'sla',
          label: 'SLA金额',
          slot: true,
          width: 100
        },

        {
          prop: 'slaReason',
          label: 'SLA'
        },
        // {
        //   prop: 'adminUserId',
        //   label: '总部用户/收益',
        //   slot: true,
        //   minWidth: 120
        // },
        // {
        //   prop: 'companyUserId',
        //   label: '分公司用户/收益',
        //   slot: true,
        //   minWidth: 120
        // },
        {
          prop: 'partnerUserId',
          label: '业务经理/收益',
          slot: true,
          minWidth: 120,
          width: 140
        },
        // {
        //   prop: 'partnerReferenceUserId',
        //   label: '合伙人推荐/收益',
        //   slot: true,
        //   minWidth: 120
        // },
        {
          prop: 'cityUserId',
          label: '市代理/收益',
          slot: true,
          minWidth: 120,
          width: 140
        },
        // {
        //   prop: 'cityReferenceUserId',
        //   label: '市代理推荐/收益',
        //   slot: true,
        //   minWidth: 120
        // },
        {
          prop: 'countyUserId',
          label: '区代理/收益',
          slot: true,
          width: 140
        },
        {
          prop: 'userName',
          label: '负责人',
          minWidth: 120
        },
        // {
        //   prop: 'userId',
        //   label: '铺手/收益',
        //   slot: true,
        //   minWidth: 100
        // },
      ]
    }
    
  })

  // ============================================================================= 自定义事件区域 ====================================================================

  function profitByData (obj) {
    childData.value.checkref = obj.checkref
    jm_modal_view.value.showView()
    nextTick(() => {
      data_detail.value.initData({
        data: {
          settleDate: obj.data.settleDate
        }
      })
    })
  }




  // ================================================================================================================================================================

  
  // 保存数据提交方法
  function childDataOperation(obj) {
    // 自定义入参可为空
    let resData = {}
    eval(`${obj.checkref}.value.${obj.fn}({
      data: ${JSON.stringify(resData)}
    })`)
  }

  // 公共模板返回数据emit事件
  async function checkData(obj) {
    childData.value = obj
    await nextTick()
    const resData = obj.data
    eval(`${obj.checkref}.value.${obj.fn}({
      data: ${JSON.stringify(resData)}
    })`)
  }

  // 关闭弹窗事件
  function closeDialog(flag) {
    jm_modal_view.value.closeDialog(flag)
  }
  
  // ----------------- 右键点击选择菜单事件 -------------------------
  function contextMenuClick(item) {
    console.log(item)
    store.commit('set_pop_attr', {
      pop_show: false
    })
  }

  // 
  // function diyBtn(obj) {
  //   const sendobj = {
  //     data: obj.data,
  //     checkref: obj.checkref,
  //     fn: 'initData'
  //   }
  //   jm_modal_view.value.diyBtnFn(sendobj)
  // }
  // 高级筛选条件传入并搜索
  function advSearch(obj) {
    if (obj) {
      switch (obj.type) {
        case 'daterange':
          if (obj.data) {
            obj.ori_data.startDate = new Date(obj.data[0]).toLocaleDateString()
            obj.ori_data.endDate = new Date(obj.data[1]).toLocaleDateString()
          } else {
            obj.ori_data.startDate = ''
            obj.ori_data.endDate = ''
          }
          break;
      
        default:
          break;
      }
    }
    // jm_modal_view.value.advSearch()
  }

</script>

<style scoped>

</style>